<template>
  <div class="dashboard_breadcrumb">
    <el-tabs
      v-model="pageActiveName"
      class="demo-tabs"
      @tab-click="handleClick"
      @tab-remove="handleRemove"
      style="width: 100%"
    >
      <el-tab-pane
        v-for="(item, index) in routerStore.tabBarList"
        :key="item.menuId"
        :label="item.menuName"
        :name="item.menuId"
        :closable="index != 0"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
    
<script setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useRouterStore } from '@/stores/modeles/router'
import router from '@/router'

const route = useRoute()
const routerStore = useRouterStore()

const pageActiveName = ref('')

watch(
  () => route.path,
  (newPath) => {
    nextTick(() => {
      updateTabs()
    })
  }
)

watch(
  () => route.query,
  (newPath) => {
    nextTick(() => {
      updateTabs()
    })
  }
)

watch(
  () => pageActiveName.value,
  (val) => {
    if (val && val != '') {
      routerStore.submitPageName(val)
    }
  }
)
const pagepath = computed(() => {
  return pageActiveName.value && pageActiveName.value != ''
    ? routerStore.tabBarList.find((i) => i.menuId == pageActiveName.value).menuUrl.split('?')[0]
    : ''
})

const updateTabs = () => {
  nextTick(() => {
    let urlpath = route.path
    if (route.query.pageid) {
      urlpath = `${urlpath}?pageid=${route.query.pageid}`
    }
    routerStore.updateTabs(route.path).then(() => {
      // pageActiveName.value =  route.path

      pageActiveName.value = routerStore.tabBarList.find((i) => i.menuUrl == urlpath).menuId
    })
  })
}

//点击跳转
const handleClick = (val) => {
  const routerdata = routerStore.tabBarList[val.index]

  router.push({ path: pagepath.value, query: routerdata.query || {} })
}

//删除标签
const handleRemove = (val) => {
  routerStore.removeTabs(val, pageActiveName.value).then((pathdata) => {
    if (pathdata != '') {
      router.push({ path: pathdata.menuUrl.split('?')[0], query: pathdata.query || {} })
    }
  })
}

onMounted(() => {
  updateTabs()
})
</script>
    
<style scoped lang="scss">
.dashboard_breadcrumb {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;

  :deep(.el-tabs__content) {
    display: none;
  }

  :deep(.el-tabs__nav-scroll) {
    padding: 0 8px;
  }
}
</style>